Handling Text, Number, Email, and Password Inputs in React Native

Course: React Native Training

Topic: Handling Text, Number, Email, and Password Inputs

Course Link: React Native Training at JustAcademy

Demo Link: Register for a Course Demo

Website: JustAcademy

1. Introduction to Different Input Types in React Native

Input fields are essential components of mobile applications because they allow users to enter information, create accounts, log in, search for products, update profiles, and submit forms. React Native provides the TextInput component to collect and manage text entered through the device keyboard.

Although React Native primarily uses the same TextInput component for different kinds of data, developers can configure its properties to support names, numbers, email addresses, passwords, and other information.

For example, a registration screen might contain a name field, an email field, a phone number field, and a password field. Each field requires appropriate keyboard settings, state management, validation, and user feedback.

1.1 Types of Input Fields

1.2 Learning Objectives

• Understand how TextInput works in React Native.
• Create and manage general text fields.
• Handle numeric values and phone numbers appropriately.
• Configure email fields with suitable keyboard settings.
• Create secure password fields.
• Manage form values using the useState Hook.
• Validate text, numbers, email addresses, and passwords.
• Display helpful validation messages.
• Build reusable input components.
• Develop a complete registration form.

2. Understanding the TextInput Component

TextInput is a built-in React Native component that allows users to enter and edit text. Its behavior can be customized using props such as value, onChangeText, placeholder, keyboardType, and secureTextEntry.

2.1 Importing TextInput

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  Pressable,
  StyleSheet
} from 'react-native';

2.2 Basic TextInput Example

function BasicInput() {
  const [text, setText] = useState('');

  return (
    <View>
      <Text>Enter your name</Text>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="Enter name"
      />
      <Text>You entered: {text}</Text>
    </View>
  );
}

Explanation:

• useState('') initializes the input value as an empty string.
• value={text} displays the current state value.
• onChangeText={setText} updates the state whenever the user types.
• placeholder displays a hint while the field is empty.

2.3 Important TextInput Properties

3. Handling Text Inputs

Text inputs are suitable for names, usernames, addresses, descriptions, titles, and other information that primarily consists of text.

3.1 Creating a Name Input

function NameField() {
  const [name, setName] = useState('');

  return (
    <View>
      <Text>Full Name</Text>
      <TextInput
        value={name}
        onChangeText={setName}
        placeholder="Enter your full name"
        autoCapitalize="words"
        autoCorrect={false}
        maxLength={80}
      />
      <Text>Name: {name}</Text>
    </View>
  );
}

3.2 Explanation of Text Input Properties

• autoCapitalize="words" requests capitalization at the beginning of words.
• autoCorrect={false} disables automatic text correction.
• maxLength={80} limits the input to 80 characters.
• onChangeText keeps the entered name synchronized with React state.

Automatic capitalization is a convenience, not a guarantee of correct name formatting. Names can contain lowercase letters, apostrophes, hyphens, and characters from many writing systems, so avoid overly restrictive name validation.

3.3 Handling Username Input

function UsernameField() {
  const [username, setUsername] = useState('');

  return (
    <TextInput
      value={username}
      onChangeText={setUsername}
      placeholder="Choose a username"
      autoCapitalize="none"
      autoCorrect={false}
      maxLength={30}
      accessibilityLabel="Username"
    />
  );
}

Usernames often need application-specific validation. For example, an application may allow letters, numbers, and underscores, but the exact rules should be defined by the product requirements.

4. Handling Number Inputs

Numeric information is used in many applications, including age forms, quantity selectors, measurements, prices, and account details. React Native TextInput accepts text, so developers must decide how to display, validate, and convert numeric input.

4.1 Using keyboardType for Numbers

The keyboardType property requests a suitable keyboard layout. It does not automatically turn TextInput into a numeric data type and does not guarantee that only valid numbers can be entered.

function AgeInput() {
  const [age, setAge] = useState('');

  return (
    <View>
      <Text>Age</Text>
      <TextInput
        value={age}
        onChangeText={setAge}
        placeholder="Enter your age"
        keyboardType="number-pad"
        maxLength={3}
      />
      <Text>Entered age: {age}</Text>
    </View>
  );
}

4.2 Common Numeric Keyboard Options

Keyboard options and their exact appearance may differ between Android and iOS. Choose a suitable option and test it on the target devices.

4.3 Validating Numeric Input

When a field should contain only digits, the application can validate the value or filter unwanted characters. The correct approach depends on whether the field represents an integer, decimal number, telephone number, or identifier.

function NumericInput() {
  const [quantity, setQuantity] = useState('');

  function handleQuantityChange(value) {
    const digitsOnly = value.replace(/[^0-9]/g, '');
    setQuantity(digitsOnly);
  }

  return (
    <TextInput
      value={quantity}
      onChangeText={handleQuantityChange}
      keyboardType="number-pad"
      placeholder="Enter quantity"
      maxLength={5}
    />
  );
}

The example keeps only digits. It is appropriate for a simple whole-number field, but not for decimal amounts, negative numbers, or values that need a decimal separator.

4.4 Converting Text to a Number

TextInput values are strings. Convert them to a number only when numeric calculations are required.

const [quantity, setQuantity] = useState('');

const parsedQuantity =
  quantity.trim() === '' ? null : Number(quantity);

const isValidQuantity =
  parsedQuantity !== null &&
  Number.isFinite(parsedQuantity) &&
  parsedQuantity >= 0;

Check for an empty string before conversion because Number('') evaluates to zero. Also check for non-finite values and application-specific limits.

4.5 Handling Phone Numbers

Telephone numbers should usually remain strings rather than numeric values. They may contain a leading zero, a country code, spaces, or a plus sign. Numeric conversion can remove meaningful formatting or leading zeros.

function PhoneInput() {
  const [phone, setPhone] = useState('');

  return (
    <TextInput
      value={phone}
      onChangeText={setPhone}
      placeholder="Enter phone number"
      keyboardType="phone-pad"
      maxLength={20}
      autoCorrect={false}
      accessibilityLabel="Phone number"
    />
  );
}

Validate telephone numbers according to the countries and formats supported by the application. A phone keyboard alone does not guarantee a valid number.

5. Handling Email Inputs

Email input fields collect email addresses for account creation, authentication, communication, and password recovery. A good email field uses a suitable keyboard layout, disables unwanted capitalization, and provides helpful validation feedback.

5.1 Creating an Email Input

function EmailInput() {
  const [email, setEmail] = useState('');

  return (
    <View>
      <Text>Email Address</Text>
      <TextInput
        value={email}
        onChangeText={setEmail}
        placeholder="[email protected]"
        keyboardType="email-address"
        autoCapitalize="none"
        autoCorrect={false}
        maxLength={254}
        accessibilityLabel="Email address"
      />
    </View>
  );
}

5.2 Important Email Properties

• keyboardType="email-address" requests a keyboard suitable for email entry.
• autoCapitalize="none" avoids automatic capitalization.
• autoCorrect={false} prevents unwanted spelling corrections.
• maxLength={254} sets a practical character limit commonly used for email addresses.

5.3 Basic Email Validation

function isValidEmail(value) {
  const email = value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

const [email, setEmail] = useState('');
const [submitted, setSubmitted] = useState(false);

const emailError =
  submitted && !isValidEmail(email)
    ? 'Please enter a valid email address.'
    : '';

This regular expression checks a basic email format. It cannot confirm that the mailbox exists or that the user owns the address. For important account workflows, use server-side validation and, when appropriate, email verification.

5.4 Showing Email Validation Feedback

<TextInput
  value={email}
  onChangeText={setEmail}
  placeholder="[email protected]"
  keyboardType="email-address"
  autoCapitalize="none"
  autoCorrect={false}
/>

{emailError ? (
  <Text accessibilityLiveRegion="polite">
    {emailError}
  </Text>
) : null}

6. Handling Password Inputs

Password fields collect sensitive information used for authentication or account security. They should obscure entered text, avoid unnecessary exposure of the value, and provide appropriate password validation.

6.1 Creating a Password Field

function PasswordInput() {
  const [password, setPassword] = useState('');

  return (
    <View>
      <Text>Password</Text>
      <TextInput
        value={password}
        onChangeText={setPassword}
        placeholder="Enter password"
        secureTextEntry={true}
        autoCapitalize="none"
        autoCorrect={false}
        accessibilityLabel="Password"
      />
    </View>
  );
}

6.2 Understanding secureTextEntry

The secureTextEntry property obscures the text entered into a single-line input. It is useful for passwords and similar secrets.

<TextInput
  value={password}
  onChangeText={setPassword}
  secureTextEntry={true}
  placeholder="Password"
/>

Important: Secure text entry only changes how the text is displayed. It does not encrypt data sent to a server or securely store credentials by itself.

6.3 Password Validation

Password requirements should follow the application's security policy. A simple example may require at least eight characters, while real authentication systems may enforce additional rules and protections.

function validatePassword(password) {
  return password.length >= 8;
}

const passwordError =
  submitted && !validatePassword(password)
    ? 'Password must contain at least 8 characters.'
    : '';

6.4 Password Best Practices

• Use secureTextEntry for password fields.
• Disable unnecessary capitalization and autocorrection.
• Do not print passwords in logs or debugging output.
• Do not place passwords in navigation parameters or analytics events.
• Send credentials only over HTTPS to a trusted backend.
• Never store plaintext passwords in ordinary local storage.
• Use a suitable secure authentication architecture.
• Provide useful password requirements without revealing sensitive values.
• Consider password-manager autofill using appropriate platform-supported hints.

7. Managing Form State

React state stores the values entered by the user. A form can use separate state variables or one object containing all the fields.

7.1 Using Separate State Variables

const [name, setName] = useState('');
const [age, setAge] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

This approach is easy to understand and suitable for small forms.

7.2 Using an Object for Form State

const [form, setForm] = useState({
  name: '',
  age: '',
  email: '',
  password: ''
});

function updateField(field, value) {
  setForm(previous => ({
    ...previous,
    [field]: value
  }));
}

The update function preserves the other form values while changing the requested property.

7.3 Connecting Fields to State

<TextInput
  value={form.name}
  onChangeText={(value) => updateField('name', value)}
  placeholder="Full name"
/>

<TextInput
  value={form.age}
  onChangeText={(value) => updateField('age', value)}
  keyboardType="number-pad"
  placeholder="Age"
/>

<TextInput
  value={form.email}
  onChangeText={(value) => updateField('email', value)}
  keyboardType="email-address"
  autoCapitalize="none"
  placeholder="Email"
/>

<TextInput
  value={form.password}
  onChangeText={(value) => updateField('password', value)}
  secureTextEntry={true}
  placeholder="Password"
/>

8. Building a Complete Registration Form

This example combines text, number, email, and password inputs with basic validation and a submission handler. It demonstrates client-side validation only; it does not create an account or send information to a server.

import React, { useState } from 'react';
import {
  View,
  Text,
  TextInput,
  Pressable,
  StyleSheet
} from 'react-native';

export default function RegistrationForm() {
  const [form, setForm] = useState({
    name: '',
    age: '',
    email: '',
    password: ''
  });

  const [submitted, setSubmitted] = useState(false);
  const [message, setMessage] = useState('');

  function updateField(field, value) {
    setForm(previous => ({
      ...previous,
      [field]: value
    }));
    setMessage('');
  }

  const validName = form.name.trim().length > 0;
  const validAge =
    form.age.trim() !== '' &&
    Number.isInteger(Number(form.age)) &&
    Number(form.age) >= 18 &&
    Number(form.age) <= 120;

  const validEmail =
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim());

  const validPassword = form.password.length >= 8;

  function handleSubmit() {
    setSubmitted(true);
    setMessage('');

    if (!validName || !validAge || !validEmail || !validPassword) {
      return;
    }

    // Submit validated data to your trusted backend here.
    // Never log or expose the password.
    setMessage('All fields passed basic validation.');
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Create Account</Text>

      <Text style={styles.label}>Full Name</Text>
      <TextInput
        style={styles.input}
        value={form.name}
        onChangeText={(value) => updateField('name', value)}
        placeholder="Enter full name"
        autoCapitalize="words"
        autoCorrect={false}
        accessibilityLabel="Full name"
      />
      {submitted && !validName ? (
        <Text style={styles.error}>Name is required.</Text>
      ) : null}

      <Text style={styles.label}>Age</Text>
      <TextInput
        style={styles.input}
        value={form.age}
        onChangeText={(value) =>
          updateField('age', value.replace(/[^0-9]/g, ''))
        }
        placeholder="Enter age"
        keyboardType="number-pad"
        maxLength={3}
        accessibilityLabel="Age"
      />
      {submitted && !validAge ? (
        <Text style={styles.error}>
          Enter a whole-number age between 18 and 120.
        </Text>
      ) : null}

      <Text style={styles.label}>Email Address</Text>
      <TextInput
        style={styles.input}
        value={form.email}
        onChangeText={(value) => updateField('email', value)}
        placeholder="[email protected]"
        keyboardType="email-address"
        autoCapitalize="none"
        autoCorrect={false}
        maxLength={254}
        accessibilityLabel="Email address"
      />
      {submitted && !validEmail ? (
        <Text style={styles.error}>Enter a valid email address.</Text>
      ) : null}

      <Text style={styles.label}>Password</Text>
      <TextInput
        style={styles.input}
        value={form.password}
        onChangeText={(value) => updateField('password', value)}
        placeholder="At least 8 characters"
        secureTextEntry={true}
        autoCapitalize="none"
        autoCorrect={false}
        accessibilityLabel="Password"
      />
      {submitted && !validPassword ? (
        <Text style={styles.error}>
          Password must contain at least 8 characters.
        </Text>
      ) : null}

      <Pressable
        style={styles.button}
        onPress={handleSubmit}
        accessibilityRole="button"
        accessibilityLabel="Submit registration"
      >
        <Text style={styles.buttonText}>Register</Text>
      </Pressable>

      {message ? (
        <Text accessibilityLiveRegion="polite">{message}</Text>
      ) : null}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20
  },
  label: {
    fontSize: 16,
    marginBottom: 6
  },
  input: {
    minHeight: 48,
    borderWidth: 1,
    borderColor: '#999999',
    borderRadius: 8,
    paddingHorizontal: 12,
    marginBottom: 8
  },
  error: {
    marginBottom: 10
  },
  button: {
    backgroundColor: '#2457C5',
    padding: 14,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 12
  },
  buttonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: 'bold'
  }
});

8.1 Understanding the Registration Form

1. The form stores all four values in one state object.
2. The updateField function updates a single field without removing the other values.
3. The name validator checks for a non-empty name.
4. The age field accepts digits and checks the configured age range.
5. The email validator performs a basic format check.
6. The password validator checks the minimum length.
7. The submitted state controls when errors appear.
8. The submit handler prevents invalid values from proceeding.
9. The success message indicates that client-side validation passed, not that an account was created.

9. Handling Form Submission

Form submission occurs when the user activates a submit button or uses an appropriate keyboard action. A submission handler should validate the current values before sending them to a backend or performing another operation.

9.1 Using a Button to Submit a Form

function handleSubmit() {
  const cleanedName = name.trim();
  const cleanedEmail = email.trim();

  if (!cleanedName || !isValidEmail(cleanedEmail)) {
    setSubmitted(true);
    return;
  }

  // Continue with the form submission workflow.
}

9.2 Submitting from the Keyboard

<TextInput
  value={search}
  onChangeText={setSearch}
  placeholder="Search"
  returnKeyType="search"
  onSubmitEditing={() => handleSearch(search)}
/>

Use keyboard submission where it improves the experience. Keyboard behavior can vary by platform and keyboard type, so test the interaction on both Android and iOS.

10. Managing Focus Between Fields

Focus management helps users move through forms efficiently. React Native allows developers to access input methods through a ref.

import React, { useRef, useState } from 'react';
import { View, TextInput } from 'react-native';

export default function FocusForm() {
  const emailRef = useRef(null);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <View>
      <TextInput
        value={name}
        onChangeText={setName}
        placeholder="Name"
        returnKeyType="next"
        onSubmitEditing={() => emailRef.current?.focus()}
      />

      <TextInput
        ref={emailRef}
        value={email}
        onChangeText={setEmail}
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        returnKeyType="done"
      />
    </View>
  );
}

The optional chaining operator prevents a method call if the ref is not yet available. Use focus management carefully so that it does not interrupt screen readers or the user's expected navigation flow.

11. Common Input Handling Problems

12. Security and Data Handling Best Practices

• Never treat client-side validation as a replacement for server-side validation.
• Do not expose passwords or other secrets in console logs.
• Use HTTPS for requests containing personal information.
• Do not store passwords in plaintext or ordinary application preferences.
• Use secure authentication services and appropriate credential-storage solutions.
• Validate numeric ranges before using values in calculations or transactions.
• Keep personal data out of analytics events unless there is a justified, privacy-conscious reason.
• Clear sensitive values when appropriate, such as after a successful authentication flow.
• Display only the information necessary for the current task.
• Handle backend errors without exposing internal server details to users.

13. Input Accessibility and User Experience

Well-designed input fields should be understandable, easy to use, and accessible to users with different needs.

• Provide visible labels for name, number, email, and password fields.
• Use meaningful accessibility labels where necessary.
• Use readable text sizes and sufficient contrast.
• Do not rely only on placeholder text to explain a field.
• Display validation errors close to the relevant input.
• Make form buttons large enough to interact with comfortably.
• Support screen readers and system text scaling.
• Use the correct keyboard type for each field.
• Allow users to review and correct information before submission.
• Test the form with VoiceOver and TalkBack where possible.

14. Testing Text, Number, Email, and Password Inputs

Testing ensures that each input behaves correctly for valid, invalid, empty, and unexpected values.

14.1 Text Input Test Cases

• Enter a normal name.
• Enter a name containing spaces, hyphens, or apostrophes.
• Submit an empty name field.
• Enter text at the configured character limit.

14.2 Number Input Test Cases

• Enter a valid integer.
• Try to enter letters or punctuation.
• Test the minimum and maximum allowed values.
• Check how empty input is handled.
• Verify that phone numbers preserve leading zeros when needed.

14.3 Email Input Test Cases

• Enter a correctly formatted email address.
• Enter an address without an at sign.
• Enter an address with spaces.
• Submit an empty email field.
• Check capitalization and keyboard behavior.

14.4 Password Input Test Cases

• Enter a password that meets the minimum requirement.
• Enter a password shorter than the required length.
• Check that the characters are obscured.
• Verify that the password is not printed in logs.
• Test submission with an empty password.

15. Practical Project: User Registration Screen

Project Objective

Build a React Native registration screen that collects a full name, age, email address, and password. The project should demonstrate controlled input fields, appropriate keyboard settings, validation, and submission handling.

Project Requirements

• Create four TextInput fields.
• Use state to manage every field's value.
• Configure numeric and email keyboards appropriately.
• Obscure the password field.
• Validate the required information.
• Display field-specific error messages.
• Prevent submission when validation fails.
• Display a confirmation after client-side validation passes.
• Use consistent styling and accessible labels.
• Test the form on Android and iOS.

Suggested Development Steps

1. Create a new React Native component.
2. Import TextInput, Text, View, Pressable, StyleSheet, and useState.
3. Initialize state for the form values.
4. Build the four input fields.
5. Configure keyboardType, autoCapitalize, and secureTextEntry.
6. Write field validation functions.
7. Create a submit handler that checks all fields.
8. Display helpful errors and success feedback.
9. Test valid, invalid, and empty form submissions.
10. Connect the form to a backend only after the interface and validation work correctly.

16. Best Practices Summary

• Use TextInput for text entry across common form scenarios.
• Use controlled inputs when values need validation or programmatic updates.
• Keep text values as strings while the user is typing.
• Convert numeric strings only when calculations require numeric values.
• Keep telephone numbers as strings to preserve formatting and leading zeros.
• Configure email inputs with keyboardType="email-address".
• Use autoCapitalize="none" for email addresses and many usernames.
• Use secureTextEntry for password display.
• Validate all important fields before submission.
• Validate important data again on the server.
• Use reusable components for forms with repeated input patterns.
• Provide clear labels, accessible feedback, and consistent styling.
• Test input behavior across devices and operating systems.

17. Interview Questions and Answers

Q1. What is TextInput in React Native?

Answer: TextInput is a core component used to collect and edit text entered by users through a device keyboard.

Q2. How do you manage input values?

Answer: Use React state, commonly with the useState Hook, and connect the value prop to the state and onChangeText to its update function.

Q3. How do you create a number input?

Answer: Configure a suitable keyboardType, such as number-pad or numeric, and validate the entered value separately.

Q4. Does keyboardType guarantee that only numbers can be entered?

Answer: No. It requests a keyboard layout but does not replace validation or input filtering.

Q5. How do you create an email field?

Answer: Use TextInput with keyboardType="email-address", autoCapitalize="none", and autoCorrect={false} where appropriate.

Q6. How do you validate an email address?

Answer: A basic format check can use a regular expression. The backend should perform appropriate validation, and email ownership may require verification.

Q7. What does secureTextEntry do?

Answer: It obscures the text displayed in a single-line input, making it suitable for password fields.

Q8. What is the difference between text and number input?

Answer: Both are generally handled through TextInput, but numeric fields need suitable keyboard settings and numeric validation or conversion when calculations are required.

Q9. Why should phone numbers be stored as strings?

Answer: Phone numbers can contain leading zeros, country codes, and formatting characters. They are identifiers rather than quantities for arithmetic.

Q10. What is the purpose of onChangeText?

Answer: It receives the updated input text as a string and is commonly used to update React state.

Q11. Why is client-side validation not enough?

Answer: Client-side checks can be bypassed. A server must validate important data before accepting or processing it.

Q12. How can you manage multiple fields efficiently?

Answer: Use separate state variables or a single object containing the form values, updating one property while preserving the others.

Q13. How should passwords be handled securely?

Answer: Obscure password text, avoid logging or exposing it, use HTTPS, and rely on a secure authentication and credential-handling architecture.

Q14. What is maxLength?

Answer: It limits the number of characters a user can enter into a TextInput field.

Q15. Why should forms be tested on Android and iOS?

Answer: Keyboard layouts, autofill behavior, focus handling, and some native input behaviors can differ across platforms.

18. Quick Revision Checklist

• TextInput is the main component for collecting text in React Native.
• useState manages controlled field values.
• onChangeText receives the new text value.
• keyboardType selects an appropriate keyboard layout.
• Number fields require separate validation.
• Phone numbers should usually remain strings.
• Email fields benefit from email-address keyboard configuration.
• Password fields should use secureTextEntry.
• Validation should provide clear, field-specific messages.
• Form submission should stop when required data is invalid.
• Reusable components help maintain consistent form behavior.
• Accessible labels and readable error messages improve usability.
• Important data must be validated by the server.
• Sensitive information should not be exposed in logs.
• Test forms on Android and iOS.

19. Conclusion

Handling text, number, email, and password inputs is a fundamental part of React Native development. The TextInput component provides the core functionality needed to collect information, while state management, keyboard configuration, input validation, and event handling make forms interactive and reliable.

By understanding the differences between general text, numeric values, email addresses, and passwords, developers can create forms that are easier to use, more accessible, and safer to maintain. Practice these concepts by building login, registration, profile, search, and contact screens, and test each form on Android and iOS.

20. Additional Learning Resources

• React Native Official TextInput Documentation
• React Native Handling Text Input Guide
• Explore React Native Training at JustAcademy
• Register for a Course Demo
• Visit JustAcademy